<?php if(!class_exists("View", false)) exit("no direct access allowed");?><!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鲲鹏应用中心</title>
    <script src="/i/css/main.css"></script>
    <link href="/i/css/font-awesome.min.css" rel="stylesheet">
    <script src="/i/js/chart.umd.min.js"></script>
    <script src="/i/js/jquery.min.js"></script>
    <link href="/i/css/css2.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        dark: '#1D2129',
                        light: '#F2F3F5',
                        // 新增与"蓝海"主题相关的颜色
                        ocean: {
                            50: '#E6F4FF',
                            100: '#CCE8FF',
                            200: '#99D1FF',
                            300: '#66B9FF',
                            400: '#33A1FF',
                            500: '#0088FF',
                            600: '#0066CC',
                            700: '#004C99',
                            800: '#003366',
                            900: '#001A33'
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .sidebar-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary pl-3 -ml-4;
            }
            .scrollbar-thin {
                scrollbar-width: thin;
            }
            .scrollbar-thin::-webkit-scrollbar {
                width: 4px;
            }
            .scrollbar-thin::-webkit-scrollbar-thumb {
                background-color: rgba(156, 163, 175, 0.5);
                border-radius: 2px;
            }
            .app-card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .btn-primary {
                @apply bg-primary text-white font-medium py-2 px-4 rounded-lg transition-all duration-300 hover:bg-primary/90 focus:ring-2 focus:ring-primary/50 focus:outline-none;
            }
            .btn-secondary {
                @apply bg-white text-dark border border-gray-300 font-medium py-2 px-4 rounded-lg transition-all duration-300 hover:bg-gray-50 focus:ring-2 focus:ring-gray-300 focus:outline-none;
            }
            .input-field {
                @apply border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all duration-300;
            }
            .ocean-gradient {
                @apply bg-gradient-to-r from-ocean-500 to-ocean-600;
            }
            .menu-item-active {
                @apply text-ocean-500 border-l-4 border-ocean-500 pl-2;
            }
        }
    </style>
    <style>
    /* 按钮基本样式 */
    .btn {
        padding: 0.2rem 1rem;
        border-radius: 0.25rem;
        cursor: pointer;
        font-size: 0.875rem;
        line-height: 1.25rem;
        font-weight: 500;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        transition: background-color 0.2s ease-in-out;
    }

    /* 危险按钮样式 */
    .btn-danger {
        background-color: #dc2626;
        color: #ffffff;
    }

    .btn-danger:hover {
        background-color: #b91c1c;
    }

    /* 警告按钮样式 */
    .btn-warning {
        background-color: #f59e0b;
        color: #ffffff;
    }

    .btn-warning:hover {
        background-color: #d97706;
    }

    /* 信息按钮样式 */
    .btn-info {
        background-color: #0ea5e9;
        color: #ffffff;
    }

    .btn-info:hover {
        background-color: #0284c7;
    }

    /* 黑色按钮样式 */
    .btn-black {
        background-color: #111827;
        color: #ffffff;
    }

    .btn-black:hover {
        background-color: #000000;
    }
    .text-primary { color: #3b82f6; } /* 主色调：蓝色 */
    .text-secondary { color: #64748b; } /* 次要色：灰色 */
    .text-success { color: #10b981; } /* 成功色：绿色 */
    .text-warning { color: #f59e0b; } /* 警告色：橙色 */
    .text-danger { color: #ef4444; } /* 危险色：红色 */
    .text-info { color: #06b6d4; } /* 信息色：青色 */
    .text-dark { color: #1e293b; } /* 深色：深蓝灰 */
    .text-light { color: #f8fafc; } /* 浅色：近白色 */
    .text-muted { color: #94a3b8; } /* 柔和色：浅灰 */
    .text-black { color: #0f172a; } /* 黑色 */
</style>
</head>
<body class="font-inter bg-gray-50 text-dark">
    <!-- 顶部导航栏 -->
    <header id="header" class="fixed top-0 left-0 right-0 bg-white shadow-sm z-50 transition-all duration-300">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-16">
                <div class="flex items-center space-x-2">
                    <i class="fa fa-cubes text-ocean-500 text-2xl"></i>
                    <h1 class="text-xl font-bold text-dark">鲲鹏应用中心</h1>
                </div>
                
                <div class="hidden md:flex items-center space-x-6">
                    <a href="<?php echo url(array('c'=>"main", 'a'=>"index", ));?>" class="<?php if ($_action=="index") : ?>text-ocean-500<?php else : ?>text-gray-600<?php endif; ?> font-medium">首页</a>
                    <a href="<?php echo url(array('c'=>"main", 'a'=>"categorys", ));?>" class="<?php if ($_action=="categorys") : ?>text-ocean-500<?php else : ?>text-gray-600<?php endif; ?> hover:text-ocean-500 transition-colors">应用分类</a>
                    <a href="<?php echo url(array('c'=>"main", 'a'=>"popular", ));?>" class="<?php if ($_action=="popular") : ?>text-ocean-500<?php else : ?>text-gray-600<?php endif; ?> hover:text-ocean-500 transition-colors">热门推荐</a>
                    <a href="<?php echo url(array('c'=>"main", 'a'=>"aitools", ));?>" class="<?php if ($_action=="aitools") : ?>text-ocean-500<?php else : ?>text-gray-600<?php endif; ?> hover:text-ocean-500 transition-colors">AiTool工具</a>
                    <a href="<?php echo url(array('c'=>"main", 'a'=>"helper", ));?>" class="<?php if ($_action=="helper") : ?>text-ocean-500<?php else : ?>text-gray-600<?php endif; ?> hover:text-ocean-500 transition-colors">帮助中心</a>
                </div>
                
                <div class="flex items-center space-x-4" id="user-info">
                    <div class="relative">
                        <input type="text" placeholder="搜索应用..." style="padding-left: 30px;" class="input-field pl-10 w-40 md:w-64">
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>
                    
                    <!-- 用户登录后显示的内容 -->
                    <div class="relative" id="notification">
                        <a href="<?php echo url(array('c'=>"System", 'a'=>"Index", ));?>" target="_blank" class="relative p-2 text-gray-600 hover:text-ocean-500 transition-colors">
                            <i class="fa fa-bell text-xl"></i>
                            <span class="absolute top-0 right-0 h-4 w-4 bg-danger rounded-full flex items-center justify-center text-white text-xs" id="notification-count" <?php if ($notificationCount<=0) : ?> style="display: none;"<?php endif; ?>><?php echo htmlspecialchars($notificationCount, ENT_QUOTES, "UTF-8"); ?></span>
                        </a>
                    </div>
                    <?php if ($uid) : ?>
                    <div class="flex items-center space-x-2 relative" id="user-profile">
                        <img src="https://picsum.photos/id/1005/200/200" alt="用户头像" class="h-8 w-8 rounded-full object-cover border-2 border-ocean-500" id="user-avatar">
                        <span class="hidden md:inline text-sm font-medium"><?php echo htmlspecialchars($_kp_realname, ENT_QUOTES, "UTF-8"); ?></span>
                        <!-- 新增下拉菜单 -->
                        <div id="user-dropdown" class="hidden absolute top-full right-0 mt-2 bg-white rounded-md shadow-lg py-1 w-40">
                            <a href="<?php echo url(array('c'=>"system", 'a'=>"appsindex", ));?>" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">管理应用</a>
                            <a href="<?php echo url(array('c'=>"system", 'a'=>"index", ));?>" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">管理用户</a>
                            <!-- <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">修改个人信息</a> -->
                            <a href="#" id="logout-link" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">退出登录</a>
                        </div>
                    </div>
                    <?php else : ?>
                    <!-- 用户未登录时显示的内容 -->
                    <button class="btn-primary hidden" id="login-button">登录</button>
                    <?php endif; ?>
                </div>
                
                <button class="md:hidden text-gray-600 hover:text-ocean-500 transition-colors" id="mobile-menu-button">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
            
            <!-- 移动端菜单 -->
            <div id="mobile-menu" class="hidden md:hidden pb-4">
                <div class="flex flex-col space-y-3">
                    <a href="#" class="text-ocean-500 font-medium">首页</a>
                    <a href="#" class="text-gray-600 hover:text-ocean-500 transition-colors">应用分类</a>
                    <a href="#" class="text-gray-600 hover:text-ocean-500 transition-colors">热门推荐</a>
                    <a href="#" class="text-gray-600 hover:text-ocean-500 transition-colors">最近使用</a>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <?php include $_view_obj->compile($__template_file); ?>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200">
        <div class="container mx-auto px-4 py-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <i class="fa fa-cubes text-ocean-500 text-2xl"></i>
                        <h3 class="text-lg font-bold text-dark">蓝海应用中心</h3>
                    </div>
                    <p class="text-gray-600 text-sm mb-4">一站式访问所有应用，提高工作效率</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-ocean-500 transition-colors">
                            <i class="fa fa-facebook"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-ocean-500 transition-colors">
                            <i class="fa fa-twitter"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-ocean-500 transition-colors">
                            <i class="fa fa-instagram"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-ocean-500 transition-colors">
                            <i class="fa fa-linkedin"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-md font-semibold text-dark mb-4">快速链接</h4>
                    <ul class="space-y-2">
                        <li><a href="<?php echo url(array('c'=>"main", 'a'=>"index", ));?>" class="text-gray-600 hover:text-ocean-500 text-sm transition-colors">首页</a></li>

                        <li><a href="<?php echo url(array('c'=>"main", 'a'=>"categorys", ));?>" class="text-gray-600 hover:text-ocean-500 text-sm transition-colors">应用分类</a></li>
                        <li><a href="<?php echo url(array('c'=>"main", 'a'=>"popular", ));?>" class="text-gray-600 hover:text-ocean-500 text-sm transition-colors">热门推荐</a></li>

                        <li><a href="<?php echo url(array('c'=>"main", 'a'=>"aitools", ));?>" class="text-gray-600 hover:text-ocean-500 text-sm transition-colors">AI工具</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-md font-semibold text-dark mb-4">支持</h4>
                    <ul class="space-y-2">
                        <li><a href="<?php echo url(array('c'=>"main", 'a'=>"helper", ));?>" class="text-gray-600 hover:text-ocean-500 text-sm transition-colors">帮助中心</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-ocean-500 text-sm transition-colors">联系我们</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-ocean-500 text-sm transition-colors">常见问题</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-ocean-500 text-sm transition-colors">隐私政策</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-md font-semibold text-dark mb-4">订阅更新</h4>
                    <p class="text-gray-600 text-sm mb-4">获取最新的应用资讯和更新</p>
                    <div class="flex">
                        <input type="email" placeholder="你的邮箱地址" class="input-field flex-1">
                        <button class="bg-ocean-500 text-white px-4 rounded-r-lg hover:bg-ocean-600 transition-colors">
                            <i class="fa fa-paper-plane"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-200 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-600 text-sm">© 2025 蓝海应用中心. 保留所有权利</p>
                <div class="flex space-x-6 mt-4 md:mt-0">
                    <a href="#" class="text-gray-600 hover:text-ocean-500 text-sm transition-colors">使用条款</a>
                    <a href="#" class="text-gray-600 hover:text-ocean-500 text-sm transition-colors">隐私政策</a>
                    <a href="#" class="text-gray-600 hover:text-ocean-500 text-sm transition-colors">Cookie 设置</a>
                </div>
            </div>
        </div>
    </footer>
    <!-- Toast 容器 -->
    <div id="toast"></div>
    
</body>
</html>
    